<template>
  <div class="app-container">
    <el-drawer
      :title="row.name"
      :visible.sync="drawer"
      direction="rtl"
      size="75%"
      :before-close="handleClose"
    >
      <div class="cont">
        <div class="flex">
          <p>门店ID：{{ row.id }}</p>
          <p>创建人：{{ row.userName + "-" + row.userId }}</p>
          <p>创建时间：{{ parseTime(row.createTime) }}</p>
          <p>最新修改时间：{{ parseTime(row.updateTime) }}</p>
        </div>
        <div class="tabs">
          <el-tabs v-model="shopActiveName" @tab-click="handleShopClick">
            <el-tab-pane label="门店详情" name="first" />
            <el-tab-pane label="人员管理" name="second" />
          </el-tabs>
        </div>
        <template v-if="shopActiveName == 'first'">
          <div class="msg_box">
            <div class="tit">基础信息</div>
          </div>
          <div class="flex_info">
            <div class="flex_box">
              <p class="text">门店名称：</p>
              <p class="value">{{ row.name }}</p>
            </div>
            <div class="flex_box">
              <p class="text">门店ID：</p>
              <p class="value">{{ row.id }}</p>
            </div>
            <div class="flex_box">
              <p class="text">门店地址：</p>
              <p class="value">{{ row.address }}</p>
            </div>
            <div class="flex_box">
              <p class="text">详细地址：</p>
              <p class="value">{{ row.addressDetail }}</p>
            </div>
            <div class="flex_box">
              <p class="text">联系方式：</p>
              <p class="value">{{ row.mobile }}</p>
            </div>
            <div class="flex_box">
              <p class="text">投资人：</p>
              <p class="value">{{ investInfo.name || "--" }}</p>
            </div>
            <div class="flex_box">
              <p class="text">投资人ID：</p>
              <p class="value">{{ investInfo.id || "--" }}</p>
            </div>
            <div class="flex_box">
              <p class="text">投资人手机号：</p>
              <p class="value">{{ investInfo.mobile || "--" }}</p>
            </div>
          </div>
          <div class="tit">门店推广信息</div>
          <div class="vip_status">
            <template v-if="investInfo.id">
              <div class="code_box">
                <div>
                  <p class="text">推广二维码：</p>
                  <img :src="codeImg" alt="" class="code_img" />
                  <p class="down" @click="downloadQRCode">下载二维码</p>
                </div>
                <div>
                  <p class="text">推广数字码：</p>
                  <p class="num_code">{{ investInfo.id }}</p>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="no_user">请先创建门店投资人</div>
            </template>
          </div>
        </template>
        <template v-if="shopActiveName == 'second'">
          <el-row :gutter="10" class="mb8">
            <div class="flex_end">
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :show-file-list="false"
                :before-upload="beforeFileUpload"
                :on-success="handleUploadSuccess"
                :headers="headers"
                accept=".xlsx,.xls"
              >
                <el-button type="primary" icon="el-icon-upload2" class="add"
                  >批量上传新增</el-button
                >
              </el-upload>
              <el-button
                type="primary"
                icon="el-icon-download"
                @click="downloadFile"
              >
                下载上传模板
              </el-button>
              <el-button type="primary" icon="el-icon-plus" @click="handAdd"
                >单个新增</el-button
              >
            </div>
          </el-row>
          <el-form
            v-show="showSearch"
            ref="queryForm"
            :model="queryParams"
            size="small"
            :inline="true"
          >
            <el-form-item label="名称" prop="search">
              <el-input
                v-model="queryParams.search"
                placeholder="通过人员ID、昵称进行模糊搜索"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="职责" prop="jobId">
              <el-select v-model="queryParams.jobId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="修改时间" prop="signTime">
              <el-date-picker
                v-model="queryParams.signTime"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh"
                class="czBtn"
                @click="resetQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-row class="mb8" :gutter="10">
            <right-toolbar
              :show-search.sync="showSearch"
              :columns="columns"
              @queryTable="getListData"
            />
          </el-row>
          <el-table
            ref="table"
            :key="tableKey"
            v-loading="loading"
            :data="roleList"
            style="margin-top: 20px"
            @row-click="rowClick"
          >
            <el-table-column
              v-if="columns[0].visible"
              key="id"
              label="人员ID"
              prop="id"
              :show-overflow-tooltip="true"
              width="100"
              align="left"
            />
            <el-table-column
              v-if="columns[1].visible"
              key="name"
              label="昵称"
              prop="name"
              :show-overflow-tooltip="true"
              width="100"
              align="left"
            />
            <el-table-column
              v-if="columns[2].visible"
              key="mobile"
              label="手机"
              prop="mobile"
              :show-overflow-tooltip="true"
              width="120"
              align="left"
            />
            <el-table-column
              v-if="columns[3].visible"
              key="jobId"
              label="门店职责"
              prop="jobId"
              :show-overflow-tooltip="true"
              width="100"
              align="left"
            >
              <template slot-scope="scope">
                <div class="statusBox">
                  <div v-if="scope.row.jobId == 1" class="open">投资人</div>
                  <div v-if="scope.row.jobId == 2" class="open">店长</div>
                  <div v-if="scope.row.jobId == 3" class="open">员工</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="columns[4].visible"
              key="optName"
              label="创建人"
              prop="optName"
              :show-overflow-tooltip="true"
              width="150"
              align="left"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.optName + "-" + scope.row.optId }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="columns[6].visible"
              key="createTime"
              label="最新修改时间"
              align="left"
              prop="createTime"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.updateTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              fixed="right"
              class-name="fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  class="btnText"
                  type="text"
                  @click.stop="handleUpdate(scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  class="delText"
                  @click.stop="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-drawer>
    <el-drawer
      :title="userInfo.name"
      :visible.sync="userDrawer"
      direction="rtl"
      :append-to-body="true"
      size="75%"
    >
      <div class="cont">
        <div class="flex">
          <p>人员ID： {{ userInfo.id }}</p>
          <p>所属门店： {{ userInfo.shopName }}</p>
          <p>
            门店职责：
            {{
              userInfo.jobId == 1
                ? "投资人"
                : userInfo.jobId == 2
                ? "店长"
                : "员工"
            }}
          </p>
          <p>创建人： {{ rowInfo.optName }}</p>
        </div>
        <div class="flex">
          <p>创建时间：{{ parseTime(userInfo.createTime) }}</p>
          <p>更新时间：{{ parseTime(userInfo.updateTime) }}</p>
        </div>
        <div class="tabs">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="人员详情" name="shopFirst" />
            <el-tab-pane label="推广记录" name="shopSecond" />
          </el-tabs>
        </div>
        <template v-if="activeName == 'first'">
          <div class="msg_box">
            <div class="tit">基础信息</div>
            <el-button type="primary" class="add" @click="handleUpdate(rowInfo)"
              >编辑</el-button
            >
          </div>
          <div class="flex_info">
            <div class="flex_box">
              <p class="text">头像：</p>
              <img :src="userInfo.avatar" class="avatar" alt="" />
            </div>
            <div class="flex_box">
              <p class="text">人员ID：</p>
              <p class="value">{{ userInfo.id }}</p>
            </div>
            <div class="flex_box">
              <p class="text">昵称：</p>
              <p class="value">{{ userInfo.name }}</p>
            </div>
            <div class="flex_box">
              <p class="text">所属门店：</p>
              <p class="value">{{ userInfo.shopName }}</p>
            </div>
            <div class="flex_box">
              <p class="text">所属职责：</p>
              <p class="value">
                {{
                  userInfo.jobId == 1
                    ? "投资人"
                    : userInfo.jobId == 2
                    ? "店长"
                    : "员工"
                }}
              </p>
            </div>
            <div class="flex_box">
              <p class="text">手机号：</p>
              <p class="value">{{ userInfo.mobile }}</p>
            </div>
            <div class="flex_box">
              <p class="text">性别：</p>
              <p class="value">{{ userInfo.gender == 1 ? "女" : "男" }}</p>
            </div>
            <div class="flex_box">
              <p class="text">生日：</p>
              <p class="value">{{ parseTime(userInfo.birthday) }}</p>
            </div>
          </div>
          <div class="tit">提现银行信息</div>
          <div class="vip_status">
            <div class="text_box">
              <div class="flex_box">
                <p class="text">开户名：</p>
                <p class="value">{{ userInfo.bankAcc }}</p>
              </div>
              <div class="flex_box">
                <p class="text">银行：</p>
                <p class="value">{{ userInfo.bankName }}</p>
              </div>
              <div class="flex_box">
                <p class="text">卡号：</p>
                <p class="value">{{ userInfo.bankNo }}</p>
              </div>
            </div>
            <div class="text_box">
              <div class="flex_box">
                <p class="text">更新时间：</p>
                <p class="value">
                  {{ parseTime(userInfo.cardUpdateTime) || "--" }}
                </p>
              </div>
            </div>
          </div>
          <template v-if="userInfo.bankAuth && userInfo.bankAuth.status == 1">
            <div class="tit mt20">新提交提现银行信息</div>
            <div class="vip_status">
              <div class="text_box">
                <div class="flex_box">
                  <p class="text">开户名：</p>
                  <p class="value">{{ userInfo.bankAuth.bankAcc }}</p>
                </div>
                <div class="flex_box">
                  <p class="text">银行：</p>
                  <p class="value">{{ userInfo.bankAuth.bankName }}</p>
                </div>
                <div class="flex_box">
                  <p class="text">卡号：</p>
                  <p class="value">{{ userInfo.bankAuth.bankNo }}</p>
                </div>
              </div>
              <div class="text_box">
                <div class="flex_box">
                  <p class="text">更新时间：</p>
                  <p class="value">
                    {{ parseTime(userInfo.bankAuth.createTime) || "--" }}
                  </p>
                </div>
              </div>
            </div>
            <div class="mt20">
              <el-button class="delBtn" type="danger" @click="authBankClick(3)"
                >驳回</el-button
              >
              <el-button type="primary" class="add" @click="authBankClick(2)"
                >审核通过</el-button
              >
            </div>
          </template>
        </template>
        <template v-if="activeName == 'second'">
          <div class="tit">推广明细</div>
          <div class="text_flex">
            <div class="tg_box">
              <p class="tg_tit">待提现佣金</p>
              <p class="tg_value">
                {{ userInfo.price }}
                <span>￥</span>
              </p>
            </div>
            <div class="tg_box">
              <p class="tg_tit">我的推广累计收益</p>
              <p class="tg_value">
                {{ profit.personalPromotionProfit || "--" }}
                <span>￥</span>
              </p>
            </div>
            <div class="tg_box">
              <p class="tg_tit">其他推广抽佣累计收益</p>
              <p class="tg_value">
                {{ profit.otherPromotionProfit || "--" }}
                <span>￥</span>
              </p>
            </div>
            <div class="tg_box">
              <p class="tg_tit">我的推广累计次数</p>
              <p class="tg_value">
                {{ profit.personalPromotionTimes || "--" }}
                <span>次</span>
              </p>
            </div>
            <div class="tg_box">
              <p class="tg_tit">其他推广累计次数</p>
              <p class="tg_value">
                {{ profit.otherPromotionTimes || "--" }}
                <span>次</span>
              </p>
            </div>
          </div>
          <el-form
            v-show="showSearch"
            ref="userQueryParams"
            :model="userQueryParams"
            size="small"
            :inline="true"
          >
            <el-form-item label="订单ID" prop="search">
              <el-input
                v-model="userQueryParams.search"
                placeholder="通过订单ID进行模糊搜索"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleUserQuery"
              />
            </el-form-item>
            <el-form-item label="推广类型" prop="level">
              <el-select v-model="userQueryParams.level" placeholder="请选择">
                <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="付款时间" prop="signTime">
              <el-date-picker
                v-model="userQueryParams.signTime"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleUserQuery"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh" @click="resetUserQuery"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            ref="table"
            :key="userTableKey"
            v-loading="loading"
            :data="userTgList"
            style="margin-top: 20px"
          >
            <el-table-column
              key="ordId"
              label="支付订单ID"
              prop="ordId"
              :show-overflow-tooltip="true"
              align="left"
            />
            <el-table-column
              key="name"
              label="推广类型"
              prop="name"
              :show-overflow-tooltip="true"
              align="left"
            >
              <template slot-scope="scope">
                <div class="statusBox">
                  <div v-if="scope.row.level == 1" class="open">我的推广</div>
                  <div v-else>其他抽佣</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              key="createTime"
              label="用户付款时间"
              align="left"
              prop="createTime"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              key="price"
              label="获得收益"
              prop="price"
              :show-overflow-tooltip="true"
              align="left"
            />
          </el-table>
          <pagination
            v-show="userTotal > 0"
            :total="userTotal"
            :page.sync="userQueryParams.current"
            :limit.sync="userQueryParams.size"
            @pagination="getUserTgData"
          />
        </template>
      </div>
    </el-drawer>
    <el-dialog :title="title" :visible.sync="open" width="786px" append-to-body>
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        label-position="right"
        label-width="100px"
      >
        <el-form-item prop="imageUrls">
          <span slot="label"> 头像 </span>
          <el-upload
            class="avatar-uploader"
            action="#"
            :http-request="customUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              title="点击上传头像"
              v-if="addForm.avatar"
              :src="addForm.avatar"
              class="avatar"
            />
            <img
              v-else
              src="https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/avatar.png"
              class="avatar"
              title="点击上传头像"
              alt=""
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          <el-input
            v-model="addForm.name"
            placeholder="支持中文、数字、字母"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile" placeholder="请输入11位手机号" />
        </el-form-item>
        <el-form-item label="所属门店" prop="shopId">
          <el-input v-model="row.name" disabled placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="所属职责" prop="jobId">
          <el-select
            v-model="addForm.jobId"
            placeholder="请选择职责"
            class="w-100"
          >
            <el-option
              v-for="item in addOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <p class="ts">
          <span>! </span
          >职责为投资人同时可以通过手机号登陆电脑核销端，账号为手机号初始密码为a123456
        </p>
        <!-- <el-col :span="12">
            <el-form-item label="登记时间" prop="signTime">
              <el-date-picker
                v-model="addForm.signTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="请选择日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" class="add" @click="submitForm">{{
          addForm.id ? "确认修改" : "确认新增"
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleList,
  getTicker,
  handUser,
  uploadUser,
  delUser,
  statusBank,
  getProfitView,
  getProfitViewList,
} from "@/api/index";
import { getInfo } from "@/api/login";
import { getToken } from "@/utils/auth";
import axios from "axios";
export default {
  name: "Drawer",
  props: {
    row: {
      type: Object,
      default: {},
    },
    drawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      headers: {
        accesstoken: getToken(),
      },
      uploadUrl: process.env.VUE_APP_BASE_API + "/admin/batchShopUser",
      fileList: [],
      open: false,
      codeImg: "",
      addOption: [
        {
          value: 1,
          label: "投资人",
          disabled: false,
        },
        {
          value: 2,
          label: "店长",
          disabled: false,
        },
        {
          value: 3,
          label: "员工",
        },
      ],
      userOptions: [
        {
          value: "",
          label: "全部推广类型",
        },
        {
          value: 1,
          label: "我的推广",
        },
        {
          value: 4,
          label: "其他抽佣",
        },
      ],
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 1,
          label: "投资人",
        },
        {
          value: 2,
          label: "店长",
        },
        {
          value: 3,
          label: "员工",
        },
      ],
      activeName: "first",
      shopActiveName: "first",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      columns: [
        { key: 0, label: `提现订单号`, visible: true },
        { key: 1, label: `申请人`, visible: true },
        { key: 2, label: `申请提现金额`, visible: true },
        { key: 3, label: `开户名`, visible: true },
        { key: 4, label: `银行`, visible: true },
        { key: 5, label: `银行卡号`, visible: true },
        { key: 6, label: `申请时间`, visible: true },
      ],
      investInfo: {},
      tableKey: 0,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 角色表格数据
      roleList: [],
      // 查询参数
      queryParams: {
        current: 1,
        size: 999,
        search: "",
        signTime: "",
        jobId: "",
      },
      addForm: {
        type: 2,
        name: "",
        avatar: "",
        gender: "",
        birthday: "",
        mobile: "",
        jobId: "",
        shopId: "",
      },
      addRules: {
        mobile: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        jobId: [{ required: true, message: "内容不能为空", trigger: "change" }],
      },
      title: "新增人员",
      userDrawer: false,
      userTableKey: 0,
      userQueryParams: {
        current: 1,
        size: 10,
        search: "",
        signTime: "",
        level: "",
      },
      userTotal: 10,
      userTgList: [],
      userInfo: {},
      rowInfo: {},
      profit: {},
    };
  },
  watch: {
    drawer: {
      handler(val) {
        if (val) {
          this.resetForm("queryForm");
          this.queryParams.current = 1;
          this.getListData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    downloadQRCode() {
      const link = document.createElement("a");
      link.href = this.codeImg;
      link.download = "qrcode.png";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    rowClick(row) {
      this.rowInfo = row;
      getInfo({ userId: row.id }).then((res) => {
        this.userInfo = res.data;
        this.userDrawer = true;
        this.resetUserQuery();
      });
      getProfitView({ userId: row.id }).then((res) => {
        this.profit = res.data;
      });
    },
    handleClick(tab, event) {
      this.resetUserQuery();
      this.userTableKey += 1;
    },
    /** 重置按钮操作 */
    resetUserQuery() {
      this.resetForm("userQueryParams");
      this.userQueryParams.current = 1;
      this.handleUserQuery();
    },
    handleUserQuery() {
      this.$nextTick(() => {
        this.userQueryParams.current = 1;
        this.getUserTgData();
      });
    },
    getUserTgData() {
      const data = {
        ...this.userQueryParams,
        startTime:
          this.userQueryParams.signTime &&
          new Date(this.userQueryParams.signTime[0]).getTime(),
        endTime:
          this.userQueryParams.signTime &&
          new Date(this.userQueryParams.signTime[1]).getTime(),
        userId: this.userInfo.id,
      };
      delete data.signTime;
      getProfitViewList(data).then((response) => {
        this.userTgList = response.data.records;
        this.userTotal = response.data.total || 0;
        this.loading = false;
      });
    },
    uploadFile(res) {
      const formData = new FormData();
      formData.append("file", res.file);
      uploadUser({ file: formData });
    },
    downloadFile() {
      // https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/%E5%BA%97%E9%93%BA%E6%89%B9%E9%87%8F%E5%91%98%E5%B7%A5%E5%AF%BC%E5%85%A5.xlsx
      const fileUrl =
        "https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/%E5%BA%97%E9%93%BA%E6%89%B9%E9%87%8F%E5%91%98%E5%B7%A5%E5%AF%BC%E5%85%A5.xlsx"; // 替换为实际文件的URL
      const fileName = "店铺批量员工导入.xlsx"; // 替换为你想要的文件名
      const link = document.createElement("a");
      link.href = fileUrl;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    beforeFileUpload(file) {
      const type = [
        ".xlsx",
        ".xls",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      ];
      const isJPG = type.includes(file.type);
      // 检验文件格式
      if (!isJPG) {
        this.$message.error(`文件格式错误!`);
        return false;
      }
      return true;
    },
    // 上传前校检格式和大小
    beforeAvatarUpload(file) {
      const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
      const isJPG = type.includes(file.type);
      // 检验文件格式
      if (!isJPG) {
        this.$message.error(`图片格式错误!`);
        return false;
      }
      // 校检文件大小
      // if (this.fileSize) {
      //   const isLt = file.size / 1024 <script 500;
      //   if (!isLt) {
      //     this.$message.error(`上传文件大小不能超过 500 KB!`);
      //     return false;
      //   }
      // }
      return true;
    },
    customUpload(res) {
      const that = this;
      getTicker({ filename: res.file.name }).then((response) => {
        const aliOss = response.data;
        console.log(aliOss);
        const aliOssUrl = aliOss.host;
        delete aliOss.host;
        const formData = new FormData();
        for (const key in aliOss) {
          if (aliOss.hasOwnProperty(key)) {
            formData.append(key, aliOss[key]);
          }
        }
        formData.append("file", res.file);
        const xhr = new XMLHttpRequest();
        xhr.open("post", aliOssUrl);
        xhr.send(formData);
        xhr.onload = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            that.addForm.avatar =
              "https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/" + aliOss.key;
            // resolve(aliOss.key);
          }
        };
      });
    },
    handleAvatarSuccess(res, file) {},
    handleUploadSuccess(res, file) {
      // 如果上传成功
      if (res.code == 200) {
        this.getListData();
      } else {
        this.$message.error(res.msg);
      }
    },
    handAdd() {
      this.title = "新增人员";
      this.open = true;
      this.reset();
    },
    // 表单重置
    reset() {
      this.addForm = {
        type: 2,
        name: "",
        avatar: "https://fuqiaohui.oss-cn-chengdu.aliyuncs.com/user/avatar.png",
        gender: "",
        birthday: "",
        mobile: "",
        jobId: "",
        shopId: "",
      };
      this.fileList = [];
      this.resetForm("addForm");
    },
    handleShopClick(tab, event) {
      this.resetQuery();
      this.tableKey += 1;
    },
    getListData() {
      const data = {
        ...this.queryParams,
        startTime:
          this.queryParams.signTime &&
          new Date(this.queryParams.signTime[0]).getTime(),
        endTime:
          this.queryParams.signTime &&
          new Date(this.queryParams.signTime[1]).getTime(),
        shopId: this.row.id,
        type: 2,
        sortFile: 2,
        source: 3,
      };
      delete data.signTime;
      getRoleList(data).then((response) => {
        this.roleList = response.data.records;
        this.loading = false;
        if (this.roleList.length) {
          const job = this.roleList.filter((item) => item.jobId == 1);
          const job1 = this.roleList.filter((item) => item.jobId == 2);
          if (job.length) {
            this.investInfo = job[0];
            this.addOption[0].disabled = true;
            axios({
              method: "post",
              url: "https://www.bcwd.cc/fq-server/openapi-service/createMinQrCode",
              responseType: "arraybuffer",
              data: {
                path: "pages/vip/vip",
                data: "id=" + this.investInfo.id,
                appid: "wxd7029c6a261ef094",
                width: 1280,
              },
              headers: { Authorization: "accessToken " + getToken() },
            }).then((res) => {
              this.codeImg =
                "data:image/png;base64," + this.arrayBufferToBase64(res.data);
            });
          } else {
            this.addOption[0].disabled = false;
          }
          if (job1.length) {
            this.addOption[1].disabled = true;
          } else {
            this.addOption[1].disabled = false;
          }
        } else {
          this.addOption[0].disabled = false;
          this.addOption[1].disabled = false;
          this.investInfo = {};
        }
      });
    },
    arrayBufferToBase64(buffer) {
      let binary = "";
      const bytes = new Uint8Array(buffer);
      const len = bytes.byteLength;
      for (let i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
      }
      return window.btoa(binary);
    },
    handleClose() {
      this.$emit("handleClose");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$nextTick(() => {
        this.queryParams.current = 1;
        this.getListData();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.current = 1;
      this.handleQuery();
    },
    handleUpdate(row) {
      this.reset();
      this.title = "修改人员";
      this.addForm.id = row.id;
      this.addForm.name = row.name;
      this.addForm.mobile = row.mobile;
      this.addForm.jobId = row.jobId;
      this.addForm.avatar = row.avatar;
      this.open = true;
    },
    authBankClick(num) {
      this.$modal
        .confirm("确认执行该操作吗？")
        .then(() => {
          return statusBank({
            id: this.userInfo.bankAuth.id,
            status: num,
          });
        })
        .then(() => {
          getInfo({ userId: this.userInfo.id }).then((res) => {
            this.userInfo = res.data;
          });
          this.$modal.msgSuccess("操作成功");
        })
        .catch(() => {});
    },
    handleDelete(row) {
      let roleIds = row.id;
      this.$modal
        .confirm("是否删除该数据？")
        .then(() => {
          return delUser({
            id: roleIds,
          });
        })
        .then(() => {
          this.getListData();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          if (!this.addForm.avatar) return this.$message.error("请上传图片");
          const data = {
            ...this.addForm,
            shopId: this.row.id,
            optId: localStorage.getItem("userId"),
          };
          if (this.addForm.jobId == 1) {
            data.password = "a123456";
          }
          handUser(data).then((response) => {
            this.$modal.msgSuccess(this.addForm.id ? "修改成功" : "新增成功");
            this.open = false;
            this.getListData();
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.msg_box {
  display: flex;
  justify-content: space-between;
}
.text_flex {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .tg_box {
    text-align: center;
  }
  .tg_tit {
    color: #88909a;
    font-size: 14px;
  }
  .tg_value {
    color: #000;
    font-size: 20px;
    font-weight: bold;
    span {
      font-size: 12px;
    }
  }
}
.mt20 {
  margin-top: 20px;
}
.vip_status {
  width: 70%;
  border: 1px solid #333;
  padding: 20px;
  margin-top: 20px;
  .text_box {
    display: flex;
    justify-content: space-between;
    .flex_box .text {
      width: 140px;
    }
  }
}
.delText {
  color: red;
}
.czBtn {
  margin-left: 10px;
}
.delBtn {
  margin-left: 0;
}
.ts {
  font-size: 16px;
  color: #333;
  padding-left: 24px;
  span {
    color: red;
  }
}
.flex_box {
  display: flex;
  gap: 10px;
  align-items: center;
  .text {
    font-size: 16px;
    color: #606266;
    width: 115px;
    text-align: right;
  }
  .value {
    font-size: 16px;
    color: #606266;
  }
}
.flex_end {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.w-100 {
  width: 100%;
}
.cont {
  padding: 0 20px;
}
.app-container {
  ::v-deep.el-drawer__header {
    color: #000;
    font-size: 20px;
    font-weight: bold;
  }
}
.flex {
  display: flex;
  gap: 20px;
  color: #333;
  font-size: 16px;
}

.code_box {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  .code_img {
    width: 200px;
    margin-top: 10px;
  }
  .num_code {
    font-size: 50px;
    font-weight: bold;
    margin: 0;
  }
  .down {
    color: blue;
    cursor: pointer;
  }
}
.no_user {
  color: #606266;
}
</style>
